import 'package:flutter/material.dart';

/// 响应式Widget工具类
/// 提供响应式设计的常用方法和组件
class ResponsiveWidgets {
  /// 判断是否为手机设备
  /// 屏幕宽度小于600px被认为是手机
  static bool isMobile(BuildContext context) =>
      MediaQuery.of(context).size.width < 600;

  /// 判断是否为平板设备
  /// 屏幕宽度在600px到900px之间被认为是平板
  static bool isTablet(BuildContext context) =>
      MediaQuery.of(context).size.width >= 600 &&
      MediaQuery.of(context).size.width < 900;

  /// 判断是否为桌面设备
  /// 屏幕宽度大于等于900px被认为是桌面
  static bool isDesktop(BuildContext context) =>
      MediaQuery.of(context).size.width >= 900;

  /// 获取响应式间距
  /// 根据设备类型返回不同的间距值
  static double getResponsivePadding(BuildContext context) {
    if (isMobile(context)) return 16.0; // 手机：16px
    if (isTablet(context)) return 24.0; // 平板：24px
    return 32.0; // 桌面：32px
  }

  /// 获取响应式字体大小
  /// 根据设备类型和基础字体大小计算响应式字体大小
  static double getResponsiveFontSize(BuildContext context, double baseSize) {
    if (isMobile(context)) return baseSize; // 手机：原始大小
    if (isTablet(context)) return baseSize * 1.2; // 平板：放大1.2倍
    return baseSize * 1.4; // 桌面：放大1.4倍
  }
}

/// 响应式容器Widget
/// 自动根据设备类型调整内边距的容器组件
class ResponsiveContainer extends StatelessWidget {
  /// 子组件
  final Widget child;

  /// 自定义内边距（可选）
  final EdgeInsets? padding;

  /// 外边距
  final EdgeInsets? margin;

  /// 装饰样式
  final BoxDecoration? decoration;

  const ResponsiveContainer({
    super.key,
    required this.child,
    this.padding,
    this.margin,
    this.decoration,
  });

  @override
  Widget build(BuildContext context) {
    // 获取响应式内边距
    final responsivePadding = ResponsiveWidgets.getResponsivePadding(context);

    return Container(
      padding: padding ?? EdgeInsets.all(responsivePadding), // 使用响应式内边距
      margin: margin,
      decoration: decoration,
      child: child,
    );
  }
}

/// 响应式网格Widget
/// 根据设备类型自动调整网格列数的组件
class ResponsiveGrid extends StatelessWidget {
  /// 子组件列表
  final List<Widget> children;

  /// 水平间距
  final double spacing;

  /// 垂直间距
  final double runSpacing;

  const ResponsiveGrid({
    super.key,
    required this.children,
    this.spacing = 16.0,
    this.runSpacing = 16.0,
  });

  @override
  Widget build(BuildContext context) {
    // 根据设备类型确定网格列数
    int crossAxisCount;

    if (ResponsiveWidgets.isMobile(context)) {
      crossAxisCount = 2; // 手机：2列
    } else if (ResponsiveWidgets.isTablet(context)) {
      crossAxisCount = 3; // 平板：3列
    } else {
      crossAxisCount = 4; // 桌面：4列
    }

    return GridView.builder(
      shrinkWrap: true, // 自适应内容高度
      physics: const NeverScrollableScrollPhysics(), // 禁用滚动
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: crossAxisCount, // 列数
        crossAxisSpacing: spacing, // 水平间距
        mainAxisSpacing: runSpacing, // 垂直间距
        childAspectRatio: 0.8, // 宽高比
      ),
      itemCount: children.length,
      itemBuilder: (context, index) => children[index],
    );
  }
}

/// 响应式列表Widget
/// 支持水平和垂直滚动的响应式列表组件
class ResponsiveList extends StatelessWidget {
  /// 子组件列表
  final List<Widget> children;

  /// 滚动方向
  final Axis scrollDirection;

  /// 固定高度（可选）
  final double? height;

  /// 内边距
  final EdgeInsets? padding;

  const ResponsiveList({
    super.key,
    required this.children,
    this.scrollDirection = Axis.vertical, // 默认垂直滚动
    this.height,
    this.padding,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: height,
      child: ListView.builder(
        scrollDirection: scrollDirection,
        padding:
            padding ??
            EdgeInsets.symmetric(
              horizontal: ResponsiveWidgets.getResponsivePadding(
                context,
              ), // 响应式内边距
            ),
        itemCount: children.length,
        itemBuilder: (context, index) => children[index],
      ),
    );
  }
}

/// 响应式文本Widget
/// 根据设备类型自动调整字体大小的文本组件
class ResponsiveText extends StatelessWidget {
  /// 文本内容
  final String text;

  /// 文本样式
  final TextStyle? style;

  /// 文本对齐方式
  final TextAlign? textAlign;

  /// 最大行数
  final int? maxLines;

  /// 文本溢出处理方式
  final TextOverflow? overflow;

  const ResponsiveText(
    this.text, {
    super.key,
    this.style,
    this.textAlign,
    this.maxLines,
    this.overflow,
  });

  @override
  Widget build(BuildContext context) {
    // 计算响应式字体大小
    final responsiveStyle = style?.copyWith(
      fontSize: ResponsiveWidgets.getResponsiveFontSize(
        context,
        style?.fontSize ?? 14.0, // 默认字体大小14px
      ),
    );

    return Text(
      text,
      style: responsiveStyle,
      textAlign: textAlign,
      maxLines: maxLines,
      overflow: overflow,
    );
  }
}

/// 响应式按钮Widget
/// 根据设备类型自动调整内边距的按钮组件
class ResponsiveButton extends StatelessWidget {
  /// 按钮文本
  final String text;

  /// 点击事件回调
  final VoidCallback? onPressed;

  /// 按钮样式
  final ButtonStyle? style;

  /// 按钮图标
  final Widget? icon;

  const ResponsiveButton(
    this.text, {
    super.key,
    this.onPressed,
    this.style,
    this.icon,
  });

  @override
  Widget build(BuildContext context) {
    // 创建响应式按钮样式
    final responsiveStyle = style?.copyWith(
      padding: MaterialStateProperty.all(
        EdgeInsets.symmetric(
          horizontal: ResponsiveWidgets.getResponsivePadding(
            context,
          ), // 响应式水平内边距
          vertical: ResponsiveWidgets.isMobile(context)
              ? 12.0
              : 16.0, // 响应式垂直内边距
        ),
      ),
    );

    // 如果有图标，使用带图标的按钮
    if (icon != null) {
      return ElevatedButton.icon(
        onPressed: onPressed,
        style: responsiveStyle,
        icon: icon!,
        label: ResponsiveText(
          text,
          style: const TextStyle(fontWeight: FontWeight.w600),
        ),
      );
    }

    // 普通按钮
    return ElevatedButton(
      onPressed: onPressed,
      style: responsiveStyle,
      child: ResponsiveText(
        text,
        style: const TextStyle(fontWeight: FontWeight.w600),
      ),
    );
  }
}

/// 响应式卡片Widget
/// 根据设备类型自动调整边距的卡片组件
class ResponsiveCard extends StatelessWidget {
  /// 子组件
  final Widget child;

  /// 内边距
  final EdgeInsets? padding;

  /// 外边距
  final EdgeInsets? margin;

  /// 阴影高度
  final double? elevation;

  /// 圆角半径
  final BorderRadius? borderRadius;

  const ResponsiveCard({
    super.key,
    required this.child,
    this.padding,
    this.margin,
    this.elevation,
    this.borderRadius,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: elevation ?? 4.0, // 默认阴影高度
      margin:
          margin ??
          EdgeInsets.all(
            ResponsiveWidgets.getResponsivePadding(context) / 2, // 响应式外边距
          ),
      shape: RoundedRectangleBorder(
        borderRadius: borderRadius ?? BorderRadius.circular(12), // 默认圆角
      ),
      child: Padding(
        padding:
            padding ??
            EdgeInsets.all(
              ResponsiveWidgets.getResponsivePadding(context), // 响应式内边距
            ),
        child: child,
      ),
    );
  }
}
